<template>
	<view class="forget">

		<view class="content">
			<!-- 主体 -->
			<view class="main">
				<view class="tips">若你忘记了密码，可在此重置新密码。</view>
				<wInput v-model="userName" type="text" maxlength="11" placeholder="请输入手机号码"></wInput>
				<wInput v-model="passData" type="password" maxlength="11" placeholder="请输入新密码" isShowPass></wInput>

				<wInput v-model="verCode" type="number" maxlength="4" placeholder="验证码" isShowCode codeText="获取重置码" setTime="30"
				 ref="runCode" @setCode="getVerCode()"></wInput>
			</view>

			<wButton text="重置密码" :rotate="isRotate" @click.native="startRePass()"></wButton>

		</view>
	</view>
</template>

<script>
	var _this;

	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	import md5 from "md5"


	export default {
		data() {
			return {
				userName: "", //电话
				passData: "", //密码
				verCode: "", //验证码
				isRotate: false, //是否加载旋转
			}
		},
		components: {
			wInput,
			wButton
		},
		mounted() {
			_this = this;
		},
		methods: {
			getVerCode() {
				//获取验证码
				if (!this.$utils.valiate.isPhoneNum(_this.userName)) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号不正确'
					});
					return false;
				}
				console.log("获取验证码")

				// this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
				// uni.showToast({
				//     icon: 'none',
				// 	position: 'bottom',
				//     title: '模拟倒计时触发'
				// });
				
				// setTimeout(function(){
				// 	_this.$refs.runCode.$emit('runCode',0); //假装模拟下需要 终止倒计时
				// 	uni.showToast({
				// 	    icon: 'none',
				// 		position: 'bottom',
				// 	    title: '模拟倒计时终止'
				// 	});
				// },3000)

				let data = {};
				_this.$utils.http.post('/sms/sendPhoneMsg?phoneNumber=' + _this.userName, data)
					.then(res => {
						console.log(JSON.stringify(res.data.code));
						this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
						if (res.code === 200) {
							// _this.verCode = res.data.code;
							console.log("验证码获取成功!");
						} else {
							console.log("验证码获取失败!");

							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: '验证码获取失败！'
							});
						}
					})
					.catch(err => {
						console.log("验证码获取失败!");
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '验证码获取失败！'
						});
					})
			},
			startRePass() {
				//重置密码
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}

				if (!this.$utils.valiate.isPhoneNum(_this.userName)) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号不正确'
					});
					return false;
				}
				if (this.passData.length < 6) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '密码不正确'
					});
					return false;
				}
				if (this.verCode.length != 4) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '验证码不正确'
					});
					return false;
				}

				let data = {
					phonenumber: this.userName,
					password: md5(this.passData)
				};
				_this.$utils.http.post('mobileUser/refoundPwd/' + this.verCode, data)
					.then(res => {
						console.log(JSON.stringify(res));
						if (res.code === 200) {

							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: '新密码设置成功！'
							});

							setTimeout(function() {
								uni.navigateBack({
									delta: 1,
									animationType: 'pop-out',
									animationDuration: 200
								}, 2000);
							});
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: '重置密码失败！'
							});
						}
					})
					.catch(err => {
						console.log("register for error");
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '重置密码失败！'
						});
					})

				_this.isRotate = true;
				setTimeout(function() {
					_this.isRotate = false
				}, 3000)

				console.log("重置密码成功")
			}
		}
	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url("../../common/css/login/main.css");
</style>
